Nhảy tới nội dung

Vòng lặp Game (Game Loop)

Tạo một vòng lặp game hoàn chỉnh trong JavaScript và tìm hiểu về tốc độ khung hình (frame rate / FPS).

Tại sao bạn cần một vòng lặp game?​

Trong bài học trước, bạn đã vẽ một hình chữ nhật lên canvas. Nhưng thao tác đó chỉ thực hiện đúng 1 lần. Để làm cho đối tượng di chuyển và tạo ra một trò chơi thực sự, bạn cần vẽ lặp đi lặp lại rất nhiều lần.

Vòng lặp game (Game Loop) sẽ là trái tim của trò chơi, liên tục thực thi logic game và thực hiện các thao tác vẽ lại khung hình (frame).

Chuyển động

FPS là gì?​

FPS là viết tắt của Frames Per Second (Số khung hình mỗi giây). FPS càng cao thì trò chơi càng mượt mà và khoảng thời gian trễ giữa các khung hình càng nhỏ.

Vòng lặp game chuẩn trong JavaScript​

Không nên dùng vòng lặp while (sẽ treo trình duyệt) hay setInterval() (không đồng bộ với tần số quét của màn hình).

Giải pháp chuẩn nhất là dùng window.requestAnimationFrame():

window.requestAnimationFrame(gameLoop);

function gameLoop(timeStamp) {
    draw();
    window.requestAnimationFrame(gameLoop);
}

Trình duyệt sẽ tự động điều chỉnh tốc độ gọi hàm (thường là 60fps hoặc theo tần số quét màn hình), giúp mượt mà và tối ưu năng lượng cho thiết bị (đặc biệt là thiết bị di động).

Ví dụ về Game Loop​

<script>
    "use strict";
    let canvas;
    let context;

    window.onload = init;

    function init(){
        canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');

        // Bắt đầu vòng lặp game
        window.requestAnimationFrame(gameLoop);
    }

    function gameLoop(timeStamp){
        draw();

        // Tiếp tục yêu cầu khung hình tiếp theo
        window.requestAnimationFrame(gameLoop);
    }

    function draw(){
        let randomColor = Math.random() > 0.5? '#ff8080' : '#0099b0';
        context.fillStyle = randomColor;
        context.fillRect(100, 50, 200, 175);
    }
</script>

Vẽ